import React from 'react';
import Chart from 'echarts-for-react';
import { Radio } from 'antd';
import {energyConsumptionStatistics} from '../../../services/cockpit';

const RadioGroup = Radio.Group;

// let data = {
//     time:['1月','2月','3月','4月','5月','6月'],
//     gases:[2.0, 4.9, 7.0, 23.2, 25.6, 76],
//     electricity:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7],
//     water:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2],
// };

class MyLineL extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value:1,
            dataList: '',
        };
    }
    componentDidMount() {

        energyConsumptionStatistics({findType:this.state.value}).then(data => {
            let dataList = data.data.ret;
            this.setState({
                dataList
            })
        })
    }
    onChange = (e) => {
        energyConsumptionStatistics({findType:e.target.value}).then(data => {
            let dataList = data.data.ret;
            this.setState({
                value: e.target.value,
                dataList
            })
        });
    };
    setOption = () => {
        let myOption;
        let data = this.state.dataList;
        myOption = {
        textStyle:{color:'#fff'},
        color:['#9F9FFF','#25BAA4','#66ABFF'],
        tooltip: {
            trigger: 'axis',
            // axisPointer: {
            //     type: 'cross'
            // }
        },
        grid: {
            right: '20%'
        },
        toolbox: {},
        legend: {
            data:['水(t)','电(kW·h)','天然气(m³)'],
            textStyle:{
                color:'#fff'
            },
            top:28,
            left:100
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap:false,
                axisTick: {
                    alignWithLabel: true
                },
                axisLine:{lineStyle:{color:'#66ABFF'}},
                data: data.time
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '水(t)',
              
                position: 'right',
                axisLine: {
                    lineStyle: {
                        color: '#9F9FFF'
                    }
                },
                splitLine:{lineStyle:{color:'#063436',type:'dashed'}},
                axisLabel: {
                    formatter: '{value}'
                }
            },
            {
                type: 'value',
                name: '电(kW·h)',
            
                position: 'right',
                offset: 50,
                axisLine: {
                    lineStyle: {
                        color: '#25BAA4'
                    }
                },
                splitLine:{lineStyle:{color:'#063436',type:'dashed'}},
                axisLabel: {
                    formatter: '{value}'
                }
            },
            {
                type: 'value',
                name: '天然气(m³)',
               
                position: 'left',
                axisLine: {
                    lineStyle: {
                        color: '#66ABFF'
                    }
                },
                splitLine:{lineStyle:{color:'#063436',type:'dashed'}},
                axisLabel: {
                    formatter: '{value}'
                }
            }
        ],
        series: [
            {
                name:'天然气(m³)',
                type:'line',
                yAxisIndex: 2,
                showSymbol:false,
                itemStyle:{
                    shadowColor: '#fff',
                    shadowBlur:11
                },
                areaStyle: {
                    opacity:0
                },
                data:data.gases
            },
            {
                name:'电(kW·h)',
                type:'line',
                yAxisIndex: 1,
                showSymbol:false,
                itemStyle:{
                    shadowColor: '#fff',
                    shadowBlur:11
                },
                areaStyle: {
                    opacity:0
                },
                data:data.electricity
            },
            {
                name:'水(t)',
                type:'line',
                yAxisIndex: 0,
                showSymbol:false,
                itemStyle:{
                    shadowColor: '#fff',
                    shadowBlur:11
                },
                areaStyle: {
                    opacity:0
                },
                data:data.water
            }
        ]
    };
        return myOption;
    };
    render() {
        return (
            <div>
                <div style={{position: 'absolute', right: '20px'}}>
                    <RadioGroup onChange={this.onChange} value={this.state.value}>
                        <Radio value={1}><span style={{color:'#fff'}}>一周</span></Radio>
                        <Radio value={2}><span style={{color:'#fff'}}>一个月</span></Radio>
                        <Radio value={3}><span style={{color:'#fff'}}>三个月</span></Radio>
                    </RadioGroup>
                </div>
                <Chart
                    option={this.setOption()}
                    notMerge
                    lazyUpdate
                    style={{ height: 290 }}
                />
            </div>
        )
    }
}
export default MyLineL;
